<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
  <div class="ui-icons-title">
    <span class="text-color--gray">This is Official Material Design Icons. You can download them directly from the <a target="_blank" href="https://material.io/icons/">Material Design spec.</a></span>
  </div>
</div>
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
  <base-card>
    <base-card-title>
      <h2 class="mdl-card__title-text">Icons</h2>
    </base-card-title>
    <base-card-body>
      <div *ngFor="let section of data" class="section">
        <div class="text-color--gray section-name">{{ section.name | titlecase }}</div>
        <div>
          <div *ngFor="let icon of section.icons" class="itemcontainer">
            <div class="item" [ngClass]="section.name">
              <div class="itemBox" [id]="icon">
                <i class="material-icons">{{ icon }}</i>
                <div class="caption">{{ icon.length > 12 ? (icon | slice:0:12) + '...' : icon }}</div>
              </div>
              <!-- NOTE: it prevents scrolling -->
              <!-- <div class="mdl-tooltip" [attr.for]="icon">{{ icon }}</div> -->
            </div>
          </div>
        </div>
      </div>
    </base-card-body>
  </base-card>
</div>
